<template>
    <div class="login">
        <div class="login-con">
            <Card icon="log-in" title="欢迎登录" :bordered="false">
                <div class="form-con">
                    <Form v-if="isLogin" ref="loginForm" class="login-from" :model="form" :rules="loginCheck">
                        <FormItem prop="userName">
                            <Input prefix="ios-person-outline" type="text" v-model="form.userName" autofocus clearable placeholder="请输入用户名"/>
                        </FormItem>
                        <FormItem prop="passWord">
                            <Input prefix="ios-lock-outline" type="password" v-model="form.password" clearable placeholder="请输入密码" />
                        </FormItem>
                        <FormItem prop="isSave" class="isSave flexC">
                            <Checkbox v-model="form.isSave">自动登录</Checkbox>
                            <span class="blueText">忘记密码</span>
                        </FormItem>
                        <FormItem prop="isSave" class="isSave flexC">
                            <span>
                                <span>其它登录方式</span>
                                <img src="../../assets/login/weixin.svg" alt="">
                                <img src="../../assets/login/qq.svg" alt="">
                                <img src="../../assets/login/weibo.svg" alt="">
                            </span>
                            <span class="blueText" @click="isLogin=false">注册账户</span>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" long :loading="loading" @click="handleSubmit">
                                <span v-if="!loading">登录</span>
                                <span v-else>请稍后...</span>
                            </Button>
                        </FormItem>
                    </Form>
                    <Form v-else ref="registerForm" class="login-from" :model="registerJson" :rules="registerCheck">
                        <FormItem prop="mail">
                            <Input prefix="ios-mail-outline" type="text" v-model="registerJson.mail" autofocus clearable placeholder="请输入邮箱" />
                        </FormItem>
                        <FormItem prop="userName">
                            <Input prefix="ios-person-outline" type="text" v-model="registerJson.userName" clearable placeholder="请输入用户名" />
                        </FormItem>
                        <FormItem prop="passWord">
                            <Input prefix="ios-lock-outline" type="password" v-model="registerJson.passWord" clearable placeholder="至少6位密码，区分大小写" />
                        </FormItem>
                        <FormItem prop="passWord1">
                            <Input prefix="ios-lock-outline" type="password" v-model="registerJson.passWord1" clearable placeholder="请再次输入密码" />
                        </FormItem>
                        <FormItem>
                            <Button type="primary" long :loading="loading" @click="login('registerForm')">
                                <span v-if="!loading">注册</span>
                                <span v-else>请稍后...</span>
                            </Button>
                        </FormItem>
                        <FormItem prop="isSave" class="flexR">
                            <span class="blueText" @click="isLogin=true">使用已有账户登录</span>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        name: "login",
        data() {
            return {
                homeTitle: this.$config.title, // 标题
                isLogin: true, // 是否登陆模式
                loading: false,
                form: {
                    userName: 'admin',
                    password: '123456',
                    isSave: true
                },
                registerJson: {
                    mail: '',
                    userName: '',
                    passWord: '',
                    passWord1: ''
                },
                loginCheck: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                registerCheck: {
                    /*mail: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    passWord: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]*/
                }
            }
        },
        methods: {
            ...mapActions([
                'handleLogin',
                'getUserInfo'
            ]),
            // 登陆
            handleSubmit() {
                this.$refs['loginForm'].validate((valid)=> {
                    if (valid) {
                        let userName = this.form.userName
                        let password = this.form.password
                        console.log("1")
                        this.handleLogin({userName,password}).then(res => {
                            this.getUserInfo().then(res => {
                                this.$router.push({
                                    name: this.$config.homeName
                                })
                            })
                        }).catch((e) => {
                            console.log(e);
                            this.loading = false
                        })
                    }
                })
            },
        }
    }
</script>

<style lang="less">
    @import "./login.less";
</style>